let cinput=document.querySelectorAll("p img:nth-child(2)");
let input=document.querySelectorAll("p>input:first-child");
// 输入框有内容时显示后面图标，否则隐藏
input.forEach(function(v,i){
    v.oninput=function(){
        if(v.value==""){
            cinput[i].style.display="none";
        }
        else{
            cinput[i].style.display="block";
        }
    }
})
// 鼠标点击关闭时，隐藏图标并且清空文本框的内容
cinput.forEach(function(v,i){
    v.addEventListener("click",function(){
        this.style.display="none";
        input[i].value="";
    })
})
// 鼠标点击获取验证码时开始六十秒倒计时，在这期间按钮禁用，倒计时结束按钮启用
let btn=document.querySelector(".code button");
let timer=60;
let clear1;
btn.addEventListener("click",function(){
    btn.innerText=timer+"秒";
    clear1=setInterval(function(){
        timer--;
        btn.innerText=timer+"秒";
        btn.disabled=true;
        btn.style.backgroundColor="rgba(245, 85, 22,0.5)";
        if(timer == 0) {
            btn.disabled=false;
            btn.style.backgroundColor="rgb(245, 85, 22)";
            btn.innerText="获取验证码";
            timer=60;
            clearInterval(clear1);
        }
    },1000);
})
//获取表单
let form=document.querySelector("form");
//获取用户名输入框
let username=document.querySelector(".username input");
//获取密码框
let password=document.querySelector(".pwd input");
// 获取验证码框
let code=document.querySelector(".code input");
//获取手机号输入框
let tel=document.querySelector(".tel input");
//提交时统一判断所有输入框的值是否正确，正确返回true，不正确返回false
form.onsubmit=function(){
    if ((/^[0-9A-Za-z]{6,12}$/.test(username.value)) &&  (/^1[3-9][0-9]{9}$/.test(tel.value)) && (/^[\d]{4}$/.test(code.value)) && /^[\w]{6,12}$/.test(password.value))
    {
        return true;
    }
    else{
        return false;
    }
}
let span1,span2;
function s1(){
    span1.style.display="block";
    span2.style.display="none";
}
function s2(){
    span2.style.display="block";
    span1.style.display="none";
}
// 拿到所有的输入框
let input1=document.querySelectorAll(".form p>input");
// 遍历所有的输入框
input1.forEach(function(v){
    // 判断输入框是哪个进而调用失去焦点事件，传递参数 输入框、输入框输入错误提示信息、输入正确提示信息、正则表达式判断
    if(v.name==="username"){
        inputblur(v,".username span:nth-child(3)",".username span:last-child",/^[0-9A-Za-z]{6,12}$/);
    }
    else if(v.name==="tel"){
        inputblur(tel,".tel span:nth-child(3)",".tel span:last-child",/^1[3-9][0-9]{9}$/)
    }
    else if(v.name==="code"){
        inputblur(code,".code span:nth-child(3)",".code span:last-child",/^[\d]{4}$/);
    }
    else{
        inputblur(password,".pwd span:nth-child(3)",".pwd span:last-child",/^[\w]{6,12}$/);
    }
})
// 封装函数输入框失去焦点时判断输入框的值是否符合要求
function inputblur(name,sp1,sp2,exp){
    name.addEventListener("blur",function(){
        span1=document.querySelector(sp1);
        span2=document.querySelector(sp2);
        if (exp.test(name.value)) {
            s2();
        }
        else{
            s1();
        }
    })
}
// 点击已阅读并同意时注册按钮激活，否则为不可选中
let ched=document.querySelector(".che input");
let btn1=document.querySelector(".form>button");
console.dir(ched);
ched.onchange=function(){
    if(ched.checked == true && username.value!=="" && password.value!=="" && code.value!=="" && tel.value!==""){
        btn1.disabled=false;
        btn1.style.backgroundColor="rgb(21, 189, 237)";
    }
    else{
        btn1.disabled=true;
        btn1.style.backgroundColor="#eee";
    }
}
// 点击密码框后的眼睛时显示密码或者隐藏密码
let eye1=document.querySelector(".pwd .eye1");
let eye2=document.querySelector(".pwd .eye2");
eye1.addEventListener("click",function(){
    eye2.classList.add("active");
    this.classList.remove("active");
    password.type="text";
})
eye2.addEventListener("click",function(){
    eye1.classList.add("active");
    this.classList.remove("active");
    password.type="password";
})
